<template>
  <div class="layout-row">
    <div class="flex1 ww100 relative flex-ss overlay warp hidden plr5" v-if="!isNull(publicStore._public.cfg)">
      <!-- 曲线 -->
      <div :class="publicStore._public.cfg.values.length == 1? 'ww100 hh100' : publicStore._public.cfg.values.length == 2? 'ww50 hh100' : 'ww50 hh50'" 
        class="p5 flex-col" v-for="(v, i) in publicStore._public.cfg.values" :key="i">
        <div class="fw f20 mb20">{{v.name}}曲线</div>
        <div class="flex1" :id="'Line'+i"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ec from "@/utils/chart";
const { drawChart } = ec();
const { proxy }: any = getCurrentInstance();
const publicStore = proxy.publicStore();
const state = reactive({
  ...publicStore.$state,
});

watch(() => publicStore.data, async (val) => {
  if(proxy.isNull(val)) return console.log('自定义报错-------------------------未定义data')
  if(proxy.isNull(publicStore._public.cfg.values)) return console.log('自定义报错-------------------------未定义cfg')
  publicStore._public.cfg.values.forEach((v, i)=> {
    let temp_cfg = {chart_type: publicStore.status, name: v.name, dw: v.dw, legendArr: [''], min: 0, max: 100}
    let cfg = Object.assign(temp_cfg, publicStore._public.cfg) 
    if(cfg['min_' + (i + 1)]) cfg.min = cfg['min_' + (i + 1)]
    if(cfg['max_' + (i + 1)]) cfg.max = cfg['max_' + (i + 1)]
    Line(val[i], i, cfg)
  })
},{ immediate: false, deep: true });

const Line = async (data, i, cfg) => {
  let series = [{data}]
  drawChart("Line", "Line"+i, cfg, {series: series, xAxis: {type: 'category', boundaryGap: false}});
};

</script>

<style scoped lang="scss">

</style>
